<template>
  <div class = "login">
    <div>
      <div class="form">
        <h2>用户登录</h2>
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm">
          <el-form-item label="账号" prop="username">
            <el-input style="width: 280px;" v-model="ruleForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passwordHash">
            <el-input
                style="width: 280px"
                type="password"
                v-model="ruleForm.passwordHash"
                placeholder="请输入密码"
                show-password>
            </el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-radio-group v-model="ruleForm.role">
              <el-radio label="admin">管理员</el-radio>
              <el-radio label="farmer">普通用户</el-radio>
              <el-radio label="investor">投资者</el-radio>
              <el-radio label="auditor">审计员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 200px" type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {loginApi} from "@/api/users";

  export default {
    name: "LoginView",
    data() {
      return {
        ruleForm: {
          username: '',
          passwordHash: '',
          role: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
          passwordHash: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
          ],
          role: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        // this.$router.push('/index')
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 这里替换为实际的登录逻辑
              loginApi(this.ruleForm).then(res =>{

                this.$message.success(res.message);

                //存储后端给的token
                sessionStorage.setItem("token",res.data)
                sessionStorage.setItem("username",this.ruleForm.username)
                // 示例：根据角色跳转不同页面
                if (this.ruleForm.role === 'admin') {
                  this.$router.push('/index');
                  // this.$router.push({path:'/index',query:{username:this.ruleForm.username}});
                }else if(this.ruleForm.role === 'investor') {
                  this.$router.push('/investor');
                }else if(this.ruleForm.role === 'farmer') {
                  this.$router.push('/farmer');
                }else{
                  this.$router.push('/auditor');
                }
            })
            // console.log('提交表单:', this.ruleForm);

          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      },
    }
  }
</script>

<style>
  .login{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../../assets/bg.png') ;
    background-size: cover;    /* 关键属性：覆盖整个容器 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat;
    z-index: -1; /* 确保背景在内容下层 */
  }


  .form {
    width: 400px;
    height: 350px;
    margin: 300px 40px 10px 900px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  }

</style>

